<template>
    <div>
        <section class="content-header">安全管理&nbsp;/&nbsp;统计分析报表</section>
        <section class="title">
            <div class="find">
                <div class="clearfix" style="margin-top:15px">
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">发生时间：</label>
                            <div class="col-md-8">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker1"
                                    placeholder="YYYY-MM-DD"
                                    v-model="time.startTime"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">解决时间：</label>
                            <div class="col-md-8">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker2"
                                    placeholder="YYYY-MM-DD"
                                    v-model="time.endTime"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="col-md-1 col-md-offset-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="getStatistical">查询</button>
                    </div>
                    <div class="col-md-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="getSum('allNum')">重置</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="content clearfix">
            <div class="form-group clearfix">
                <div class="col-md-6 col-md-offset-3">
                    <div class="box">
                        <div class="box-body">
                            <!-- table数据 -->
                            <table
                                id="example"
                                class="table table-bordered table-hover"
                                style="font-size:14px"
                            >
                                <thead style="font-weight:700">
                                    <tr>
                                        <td>片区</td>
                                        <td>项目</td>
                                        <td>发现隐患数</td>
                                        <td>已处理</td>
                                        <td>未处理</td>
                                    </tr>
                                </thead>
                                <tbody v-for="item1 in list" :key="item1.value">
                                    <tr>
                                        <td
                                            :rowspan="item1.list.length+1"
                                            style="vertical-align: middle;"
                                        >{{item1.areaName}}</td>
                                    </tr>
                                    <tr v-for="item2 in item1.list" :key="item2.value">
                                        <td>{{item2.checkName}}</td>
                                        <td ref="allNum">{{item2.allNum}}</td>
                                        <td ref="treatedNum">{{item2.treatedNum}}</td>
                                        <td ref="untreatedNum">{{item2.untreatedNum}}</td>
                                    </tr>
                                </tbody>
                                <tbody>
                                    <tr>
                                        <td>合计</td>
                                        <td></td>
                                        <td>{{allNum}}</td>
                                        <td>{{treatedNum}}</td>
                                        <td>{{untreatedNum}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6"></div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            time: {
                startTime: utils.nowDate(-7),
                endTime: utils.nowDate(0)
            },
            list: [],
            allNum: 0,
            treatedNum: 0,
            untreatedNum: 0
        };
    },
    mounted() {
        this.selectDate1();
        this.selectDate2();
        this.getStatistical(() => {
            this.$nextTick(function() {
                this.allNum = this.getSum("allNum");
                this.treatedNum = this.getSum("treatedNum");
                this.untreatedNum = this.getSum("untreatedNum");
            });
        });
    },
    methods: {
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.time.startTime = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.time.endTime = ev.target.value;
                });
        },
        //查询列表
        getStatistical(callback) {
            this.$api.safe
                .statistical({
                    startTime: this.time.startTime + " 00:00:00",
                    endTime: this.time.endTime + " 23:59:59"
                })
                .then(res => {
                    if (res.success) {
                        console.log(res);
                        this.list = res.data.list;
                        callback();
                    }
                });
        },
        //重置时间
        resetTime() {
            this.time.startTime = utils.nowDate(-7);
            this.time.endTime = utils.nowDate(0);
        },
        //合计
        getSum(msg) {
            let sum = 0;
            for (let i in this.$refs[msg]) {
                sum += parseFloat(this.$refs[msg][i].innerText);
            }
            return sum;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
    padding: 15px 15px 0 15px;
    .find {
        background: #fff;
        border: 1px solid #bbb;
        padding: 0px 10px 10px 0;
        border-radius: 10px;
        margin-bottom: 15px;
        .col-md-8 {
            padding: 0;
        }
    }
    .control-label {
        padding: 0px;
        line-height: 34px;
        text-align: right;
    }
}
</style>
